<template>
	<view>
		<view class="mv-item">
			<text>推荐 MV</text>
			<view class="mv-list">
				<view class="mv-list-item" v-for="(item,index) in recommendlist" :key="index" @click="mvplay(item.id)">
					<image :src="item.picUrl" mode="" class="mv-img"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="mv-item">
			<text>最新 MV</text>
			<view class="mv-list">
				<view class="mv-list-item" v-for="(item,index) in mvnew" :key="index" @click="mvplay(item.id)">
					<image :src="item.cover" mode="" class="mv-img"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="mv-item">
			<text>网易出品 MV</text>
			<view class="mv-list">
				<view class="mv-list-item" v-for="(item,index) in exclusivelist" :key="index" @click="mvplay(item.id)">
					<image :src="item.cover" mode="" class="mv-img"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mvnew: [],
				recommendlist:[],
				exclusivelist:[]
			}
		},
		methods: {
			getmvnew(){
				uni.request({
					url:"http://134.175.83.178:3000/mv/first?limit=10",
					method:"GET",
					success:(res) => {
						const { data } = res 
						// console.log(data)
						this.mvnew = data.data
					}
				})
			},
			
			getRecommend(){
				uni.request({
					url:"http://134.175.83.178:3000/personalized/mv",
					method:"GET",
					success:(res) => {
						const { data } = res 
						// console.log(data)
						this.recommendlist = data.result
					}
				})
			},
			
			getexclusive(){
				uni.request({
					url:"http://134.175.83.178:3000/mv/exclusive/rcmd?limit=10",
					method:"GET",
					success:(res) => {
						const { data } = res 
						// console.log(data)
						this.exclusivelist = data.data
					}
				})
			},
			
			mvplay(id){
				// console.log('00')
				uni.navigateTo({
					url: `/pages/playVideo/playVideo?id=${id}`
				});
			}
			
		},
		onLoad() {
			this.getmvnew()
			this.getRecommend()
			this.getexclusive()
		}
	}
</script>

<style>
.mv-item{
	padding-top: 20rpx;
}
.mv-list{
	overflow: scroll;
	white-space: nowrap;
	width: 100%;
	padding-bottom: 20rpx;
	border-bottom: #ccc 1rpx solid;
}
.mv-list-item{
	width: 30%;
	height: 226rpx;
	border: #4CD964 1rpx solid;
	padding: 10rpx;
	display: inline-block;
	position: relative;
	margin-right: 30rpx;
}
.mv-img{
	width: 100%;
	height: 80%;
}
.mv-list-item text{
	width: 100%;
	font-size: 22rpx;
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	padding-right: 20rpx;
}
</style>
